<!-- 我正在开发 我是刘瑶瑶 QQ：1778851996 昵称：喑 -->
<template>
	<view :style="{height: height + 'px'}">
		<scroll-view scroll-y="true" :style="{height: height + 'px'}" upper-threshold="500" @scrolltoupper="ctrlBtn" @scrolltolower="loadmore">
			<!-- 列表项循环 -->
			<block v-for="(item, index) in list" :key="index">
				<!-- 列表项 -->
				<view class="reg-item" @click="goToDetail(item.id)">
					<!-- 地址和时间 -->
					<view class="reg-item-left">
						<!-- 地址 -->
						<view class="address">{{item.address}}</view>
						<!-- 时间 -->
						<view class="time">上报时间：{{item.time}}</view>
					</view>
					<!-- 缩略图 -->
					<view class="reg-item-right">
						<image :src="item.img" mode="aspectFill" class="img"></image>
					</view>
				</view>
			</block>
			<!-- 加载更多 -->
			<template v-if="list.length > 6">
				<view class="load-more">{{loadtext}}</view>
			</template>
		</scroll-view>
		<!-- 悬浮登记按钮 -->
		<template v-if="visible">
			<view class="reg-btn" @click="register">登记</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 滚动页高度
				height: '',
				// 加载文字
				loadtext: '加载中···',
				// 按钮显示
				visible: true,
				// 是否有更多数据
				isMore: true,
				// 当前页
				page: 0,
				// 数据列表
				list: []
			}
		},
		onLoad() {
			uni.getSystemInfo({
			  success: (res) => {
					this.height = res.windowHeight
					console.log(this.height)
			  }
			})
			// 首次获取数据
			this.getData()
		},
		methods: {
			// 获取列表数据
			getData() {
				uniCloud.callFunction({
					name: 'get_register',
					data: {
						"id": "1",
						"offset": this.page * 6 + 1
					}
				}).then((res) => {
					// 获取一次，页码增加一次
					this.page++
					// 将新的数据存入数据列表
					this.list = this.list.concat(res.result.data)
					console.log(this.list)
					// 当记录条数小于6时，则为最后一页数据
					if (res.result.data.length < 6) {
						this.loadtext = '所有记录均以显示'
						this.isMore = false
					}
				})
			},
			// 控制按钮显示隐藏
			ctrlBtn() {
				this.visible = true
			},
			// 上拉加载更多
			loadmore() {
				// 当第一次执行上拉加载时，使发布按钮隐藏
				if (this.visible) {
					this.visible = false
				}
				// 当还存在数据时，再次加载数据
				if (this.isMore) {
					this.getData()
				}
			},
			// 点击跳转到信息登记详情页
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/register_info/register_info?id=' + id
				})
			},
			// 跳转发布页
			register() {
				uni.navigateTo({
					url: '/pages/creat/creat'
				})			
			}
		}
	}
</script>

<style lang="less" scoped>
	// 每一个列表项
	.reg-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 140rpx;
		padding: 30rpx 40rpx;
		// 列表项的左边
		.reg-item-left {
			position: relative;
			width: 455rpx;
			height: 140rpx;
			// 列表项的地址
			.address {
				font-size: 30rpx;
				color: #333;
			}
			// 列表项的时间
			.time {
				font-size: 27rpx;
				color: #ccc;
				position: absolute;
				bottom: 0;
			}
		}
		// 列表项的右边
		.reg-item-right {
			// 列表项的缩略图
			.img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 25rpx;
			}
		}
	}
	// 加载更多
	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		font-size: 30rpx;
		color: #AAAAAA;
	}
	// 登记悬浮按钮
	.reg-btn {
		position: fixed;
		left: 220rpx;
		bottom: 125rpx;
		width: 300rpx;
		height: 110rpx;
		border: 5rpx solid #fff;
		border-radius: 60rpx;
		box-shadow:0px 8px 12px rgba(0,0,0,0.16);
		background-color: #6DDDCB;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #fff;
	}
</style>
